<template>
  <div class="base_editor">

    <header class="header">广告编辑页</header>
    <Row>
      <Col span="2">* 
      </Col>
      <Col span="20">
      <div style="background-color:black;">
        <Divider />
      </div>
      </Col>
      <Col span="2">*
      </Col>
    </Row>

    <Row>
      <Col span="5">
      <div style="font-size: 20px;">广告备注</div>
      </Col>
      <Col span="19">
      <Input v-model="info"
             type="textarea"
             :rows="4"
             placeholder="请输入一些内容，方便查阅" class="ad_info"/>
      </Col>
    </Row>

    <Row>

      <Col span="5">
      <div style="font-size:20px;">广告图片</div>
      </Col>
      <Col span="19">
      <upload-picture @getBase64="getimage"
                      ref="uploadPic"></upload-picture>
      </Col>
    </Row>

    <Button v-on:click="getContent"
            type="primary"
            style="font-size: 20px;">发布广告</Button>
    <Button @click="editorClean"
            type="primary"
            style="font-size: 20px;">清空内容</Button>
    <!--     <Button @click="addContent"
            type="primary"
            style="font-size: 20px;">追加内容</Button> -->
  </div>
</template>

<script>
import UploadPicture from "@/components/UploadPicture";
import CUpload from "@/components/upload";
import E from "wangeditor";
import qs from "qs";
export default {
  // name: "editor",
  components: {
    UploadPicture,
    //上传图片的url列表
    CUpload
  },
  data() {
    return {
      imageBase64: "",
      info: "",
    };
  },
  methods: {
    addContent: function(id) {
      let url = "/filter";
      this.$axios({
        method: "post",
        url: url,
        headers: {
          "Content-type": "application/x-www-form-urlencoded"
        },
        params: {
          id: this.$store.state.dialog.id
        }
      })
        .then(response => {
          let obj = response.data.list[0];
          this.editor.txt.append(obj.txt_html);
          this.mark = obj.mark;
        })
        .catch(error => {
          console.log(error);
        });
    },
    getContent: function() {
      //判断图片是否上传，没有上传就 不给发布文章
      // if()
      // {
      //   this.sendText();
      // }else{
      //   this.$Message.error("必须上传图片")
      // }
      console.log(this.imageBase64)
      console.log(this.info)
       this.sendText();
    },
    getimage: function(base64) {
      this.imageBase64 = base64;
    },
    sendText: function() {
      let url = "/adCreate";
      //   this.$axios({
      //   method: "post",
      //   url: url,
      //   headers: {
      //     "Content-type": "application/x-www-form-urlencoded"
      //   },
      //   params: {
      //     image: this.imageBase64,
      //     info: this.info
      //   }
      // })
      //   .then(response => {
      //     console.log(response);
      //     this.$Message.success("广告发布成功");
      //     this.editorClean();
      //   })
      //   .catch(error => {
      //     console.log(error);
      //   });


//采用json格式的传输
      this.$axios
        .post(
          url,
          {
            image: this.imageBase64,
            info: this.info
          },
          {
            headers: {
              "Content-Type": " application/json"
            }
          }
        )
        .then(response => {
          console.log(response);
          this.$Message.success("文章发布成功");
          this.editorClean();
        })
        .catch(error => {
          console.log(error);
        });
    },

    editorClean: function() {

      this.info = "";
      this.$refs.uploadPic.clean();
    }
  },
  mounted() {
    
  }
};
</script>

<style scoped>
* {
}
.base_editor {
  width: 100%;
  background-color: rgba(224, 222, 170, 0.5);
  margin-bottom: 80px;
}
.header {
  font-size: 50px;
  color: #464c5b;
}
.ad_info{
  width: 80%;
  margin-bottom: 30px;
}
</style>
